一般寫程式的時候，我會將HTML和Javascript分開來寫，但react提供了JSX的語法，將html標籤和Javascript放在同一個檔案，並讓你的程式更簡潔。

JSX幾大特色

1. 提供語意化標籤，增加程式易讀性
   JSX除了可以使用HTML外，還可以搭配XML、Javascript宣告變數。

// HTML
const element = <h1>你好，世界！</h1>;
// XML
const element = <hellowWorld/>;
// HTML+Javascript，{greeting(someone)}會取代成greeting function的回傳值
const element =(<h1>你好，{greeting(someone)}</h1>) ;

( )雖非必要，但可以避免程式用多行呈現時出錯。
React搭配JSX使用的話，可以用聲明式而非命令式的方式撰寫程式，下面用IG按讚的事件作舉例。

// 命令式
if(userLikes()) {
    if(!hasRedLike()) {
      removeHollowLike();
      addRedLike();
    }
  } else {
    if(hasRedLike()) {
      removeRedLike();
      addHollowLike();
    }
  }
  
//   聲明式
if(this.state.liked) {
    return (<RedLike />);
  } else {
    return (<HollowLike />);
  }

2. 簡化程式
   下面拿昨天的範例作舉例，可以很清楚的理解到JSX幫助你簡化你的程式。

// 未使用JSX未使用JSX
  const li=React.createElement('li',{},'第一點');

//   使用JSX
const li = <li>第一點</li>;

3.結合Javascript語法，可以清楚了解每個元件所負責的功能，讓你更好管理程式
下面用官網提供的範例作舉例。

const e = React.createElement;

class LikeButton extends React.Component {


  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}
/